<!--
 * @Author: your name
 * @Date: 2020-12-30 10:46:48
 * @LastEditTime: 2021-01-07 17:12:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\test\historyModule\historyModule.vue
-->
<template>
    <div class="historyInverter-mian-box" v-loading='loading'>
        <div style="overflow: hidden;">
            <div class="search-box" style="float:left;">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('test.test_house_name')}}</span>
                <el-select v-model="houseId" filterable :placeholder="$t('please_choose')"  @change='houseChange'>
                    <el-option
                        v-for="item in allHouseList"
                        :key="item.sid"
                        :label="item.houseName"
                        :value="item.sid">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('test.deviceTest.historyTest.info-normal')}}:</span>
                <span class="green">{{history_normal}}</span>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('test.deviceTest.historyTest.info-alarm')}}:</span>
                <span class="red">{{history_alarm}}</span>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('test.deviceTest.historyTest.info-breakLine')}}:</span>
                <span >{{history_break}}</span>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('test.deviceTest.historyTest.info-all')}}:</span>
                <span >{{history_total}}</span>
            </div>
            <div class="search-box-sub red">
                <span class="lable-text">{{$t('test.deviceTest.historyTest.info-problem')}}:</span>
                <span >{{history_wait}}</span>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('test.deviceTest.historyTest.Last_update')}}:</span>
                <span >{{timeTic}}</span>
            </div>
        </div>
        <div class="float-right-box search-box">
            <el-button plain @click='selectAll'>{{$t('test.deviceTest.historyTest.Select')}}</el-button> 
            <el-button plain icon='el-icon-refresh' @click='deviceTestGetPage'>{{$t('test.deviceTest.historyTest.refresh')}}</el-button>
            <el-button plain icon='el-icon-circle-plus-outline' @click='showAddModal()'>{{$t('add')}}</el-button>
            
            <el-popconfirm
                :confirm-button-text='$t("sure")'
                :cancel-button-text='$t("cancel")'
                :title="$t('promotionManagement.allDelete')"
                @confirm='deleteData()'
                style="margin:0px 10px"
            >
            <el-button slot="reference" plain icon='el-icon-error' >{{$t('delete')}}</el-button>
            </el-popconfirm>
            <el-popconfirm
            :confirm-button-text='$t("sure")'
            :cancel-button-text='$t("cancel")'
            :title="$t('test.deviceTest.js_Confirm_empty_test_equipment')"
            @confirm='clearData()'
            style="margin:0px 10px 0px 0px"
            >
                <el-button slot="reference" plain icon='el-icon-delete'>{{$t('test.deviceTest.historyTest.wipe_data')}}</el-button>
            </el-popconfirm>
            <el-button plain icon='el-icon-check' @click='finishData()'>{{$t('test.deviceTest.historyTest.aging_finish')}}</el-button>
        </div>
        </div>
        <div class="content-main-box" v-if='housePageList.length>0'>
            <template v-for='(item,index) in housePageList'>
                <div v-if='!item.wifiSN' :key='index' class="null-sub-box">
                    <p>{{$t('test.test_house_column')}}:{{item.filedName}}</p>
                    <div class="add-button" @click='showAddModal(item.filedName)'>
                        <i class="el-icon-plus"></i>
                    </div>
                </div>
                <div v-else :key='index' class="data-sub-box" :class="item.status == 1 ?'red':item.status == 2?'orange':''">
                    <div class="header-main-box">
                        <div class="check-box">
                            <el-checkbox v-model="item.checked"></el-checkbox>
                        </div>
                        <div class="header-sub-box">
                            <span>SN:{{item.wifiSN}}</span>
                        </div>
                        <div class="span-wrap" v-if='item.inverterAlarmNum != null'>{{item.inverterAlarmNum>0 ? item.inverterAlarmNum:0}}</div>
                    </div>
                    <div class="content-list-box" v-if='item.reflashTime'>
                        <span>{{$t('inverter')}}:{{item.inverterSN}}</span>
                        <br>
                        <span>{{$t('test.deviceTest.todayYield')}}:{{item.todayYield}} kWh</span>
                        <br>
                        <span>{{$t('test.deviceTest.totalYield')}}:{{item.totalYield}} kWh</span>
                        <br>
                        <span>PV电压:{{item.vdc1 || '0'}}V | {{item.vdc2 || '0'}}V</span>
                        <br>
                        <span>PV电流:{{item.idc1 || '0'}}A | {{item.idc2 || '0'}}A</span>
                        <br>
                        <span>输出功率:{{item.gridPower || '0'}}W</span>
                        <br>
                        <span>电池功率:{{item.batPower1 || '0'}}W</span><br>
                        <span>{{continueFormatter(item.beginTime,item.reflashTime)}}</span>
                        <br>
                        <a href="javascript:;" class="a-button" @click='showHistoryDetail(item.wifiSN,item.inverterSN)'>查看</a>
                    </div>
                    <div class="content-list-box" v-else>
                        <div class="no-data-style">No  Data</div>
                    </div>
                </div>
            </template>
</div>
<div class="content-main-box" v-else>
    <div style="width:100%;height:300px;text-align:center;padding-top:50px;">
        {{$t('noData')}}
    </div>
</div>
<add :addname='addname' :houseId='houseId' @uploadData='deviceTestGetPage'></add>
</div>
</template>

<script>
    import moment from 'moment'
    import add from './add'
    export default {
        components: {
            add
        },
        props: {

        },
        data() {
            return {
                allHouseList: [],
                houseId: '',
                housePageList: [],
                timeTic: moment().format("YYYY-MM-DD HH:mm:ss"),
                maxWidth: '',
                loading: false,
                checked: false,
                statusList: [],
                history_normal: 0,
                history_alarm: 0,
                history_break: 0,
                history_total: 0,
                history_wait: 0,
                addname: ''
            };
        },
        computed: {

        },
        watch: {

        },
        created() {

        },
        mounted() {
            this.getDictionaryBatch()
            this.testHouseGetAllHouse()
        },
        methods: {
            showHistoryDetail(wifiSN,inverterSN){
                this.$router.push({path:'frame-test',query:{wifiSN:wifiSN,inverterSN:inverterSN,oldPath:'/historyInverter'}})
            },
            async finishData(){
                let flag = true
                let checks = []
                this.housePageList.forEach(item => {
                    if (item.checked === true) {
                        checks.push(item)
                        if(item.deviceType == 3 &&(item.iccid == "null" || item.iccid == "")){
                            flag = false
                        }
                    }
                })
                if(!(checks.length > 0)){
                    this.comm.showMsg(false, '请勾选需要清除的数据！')
                    return 
                }
                if(flag){
                    let res = await this.API.deviceTestFinish({
                        wifiSns:checks.map(item =>{ return item.wifiSN})
                    })
                }else{
                    // 模块找不到Iccid，请插拔模块后重试
                }

            },
            async clearData(){
                let res = await this.API.deviceTestClear()
                if(this.comm.showMsg(res.success)){
                    this.deviceTestGetPage()
                }
            },
            async deleteData() {
                let flag = true
                let checks = []
                this.housePageList.forEach(item => {
                    if (item.checked === true) {
                        checks.push(item)
                        if (item.gridPower) {
                            flag = false
                        }
                    }
                })
                if(!(checks.length > 0)){
                    this.comm.showMsg(false, '请勾选需要删除的数据！')
                    return 
                }
                if (flag) {
                    let res = await this.API.deviceTestDeleteBatch({
                        ids:checks.map(item =>{ return item.ids})
                    })
                    if(this.comm.showMsg(res.success)){
                        this.deviceTestGetPage()
                    }
                } else {
                    this.comm.showMsg(false, '请老化完成后再进行删除操作！')
                }
            },
            selectAll() {
                this.housePageList.forEach(item => {
                    if (item.checked === false || item.checked === true) {
                        item.checked = !item.checked
                    }
                })
            },
            showAddModal(name) {
                this.addname = name || ''
                this.$store.commit('setNewVisible', true)
            },
            async getDictionaryBatch() {
                let res = await this.API.getDictionaryBatch({
                    dictCodes: 'CARD_STATUS',
                    lang: localStorage.getItem('lang') || 'zh_CN'
                })
                this.statusList = res.CARD_STATUS
            },
            async deviceTestGetPage() {
                this.loading = true
                let res = await this.API.deviceTestGetPage({
                    size: 3000,
                    current: 1,
                    houseType: 1,
                    houseTypeStr: '1',
                    houseId: this.houseId,
                })
                this.housePageList = res.rows
                this.loading = false
                this.history_normal = 0
                this.history_alarm = 0
                this.history_break = 0
                this.history_total = 0
                this.history_wait = 0
                if (this.housePageList && this.housePageList.length > 0) {
                    this.housePageList.forEach(item => {
                        if (item.wifiSN != null) {
                            this.$set(item, 'checked', false)
                            this.history_total += 1
                            if (item.status == 2) {
                                this.history_break += 1;
                            }
                            if (item.status == null) {
                                this.history_normal += 1;
                            }
                        }
                        if (item.inverterAlarmNum != null) {
                            if (item.inverterAlarmNum > 0) {
                                this.history_alarm += 1
                                this.history_wait += item.inverterAlarmNum;
                            }
                        }
                    })
                }
            },
            houseChange() {
                this.deviceTestGetPage()
            },
            async testHouseGetAllHouse() {
                let res = await this.API.testHouseGetAllHouse({
                    houseType: '1'
                })
                this.allHouseList = res
                this.houseId = res[0].sid
                this.deviceTestGetPage()
            },
            continueFormatter(btm, reflashTime) {
                var beginTime = Date.parse(new Date(btm.replace(/-/g, "/")));
                var currentTime = new Date();
                var date3 = currentTime - beginTime;
                var days = Math.floor(date3 / (24 * 3600 * 1000));
                if (reflashTime) {
                    var reflashTime = Date.parse(new Date(reflashTime.replace(/-/g, "/")));
                    var date4 = currentTime - reflashTime;
                    var days4 = Math.floor(date4 / (24 * 3600 * 1000));
                    var reflashLeave1 = date4 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
                    var reflashHour = Math.floor(reflashLeave1 / (3600 * 1000));
                    //history_break=(reflashHour+days*24)>1?(history_break+1):history_break;//大于一小时 做标记
                }
                //计算出小时数

                var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000));
                //计算相差分钟数
                var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000));
                //计算相差秒数
                var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3 / 1000);
                return (hours + days * 24) + ' ' + "小时" + ' ' + minutes + ' ' + "分钟" + ' ' + seconds + ' ' + "秒";
            }
        },
    };
</script>

<style lang="less">
    @media only screen and (max-width: 768px) {
        .historyInverter-mian-box .content-main-box {
            div {
                width: 23%;
            }
        }
    }
    
    @media only screen and (min-width: 768px) {
        .historyInverter-mian-box .content-main-box {
            div {
                width: 23%;
            }
        }
    }
    
    @media only screen and (min-width: 992px) {
        .historyInverter-mian-box .content-main-box {
            div {
                width: 22.5%;
            }
        }
    }
    
    @media only screen and (min-width: 1100px) {
        .historyInverter-mian-box .content-main-box {
            div {
                width: 22.5%;
            }
        }
    }
    
    @media only screen and (min-width: 1360px) {
        .historyInverter-mian-box .content-main-box {
            div {
                width: 18.5%;
            }
        }
    }
    
    @media only screen and (min-width: 1500px) {
        .historyInverter-mian-box .content-main-box {
            div {
                width: 15.5%;
            }
        }
    }
    
    .historyInverter-mian-box {
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .span-wrap {
            width: 20px !important;
            height: 20px;
            border-radius: 50%;
            background-color: green;
            color: red;
            position: absolute;
            top: 0px;
            right: 15px;
            text-align: center;
        }
        .float-right-box {
            float: right;
            height: 42px;
            line-height: 42px;
        }
        .content-main-box {
            display: flex;
            flex-wrap: wrap;
            .null-sub-box,
            .data-sub-box {
                // flex: 1;
                height: 300px;
                // width: 15.8%;
                // min-width: 190px;
                border: 2px dashed #ccc;
                margin-right: 10px;
                margin-bottom: 10px;
                position: relative;
            }
            .data-sub-box {
                background-color: #eee;
                .header-main-box {
                    display: flex;
                    width: 100%;
                    border-bottom: 1px dashed #ccc;
                    position: relative;
                    .check-box {
                        flex: 1;
                        text-align: center;
                    }
                    .header-sub-box {
                        flex: 4
                    }
                }
                .a-button {
                    display: block;
                    background-color: #808080;
                    color: #e4bb5d;
                    text-align: center;
                    // margin-left: -7px;
                    width: 95%;
                    position: absolute;
                    bottom: -11px;
                    left: -1px;
                }
                .content-list-box {
                    width: 100%;
                    padding: 5px 7px;
                    position: relative;
                    height: calc(100% - 42px);
                }
                .no-data-style {
                    color: #ccc;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%)
                }
                span {
                    font-size: 12px;
                    color: #383838;
                    // text-align: center;
                }
                .redText {
                    color: red;
                }
                .orangeText {
                    color: orange;
                }
            }
            .red {
                background-color: red;
            }
            .orange {
                background-color: orange;
            }
            .null-sub-box {
                position: relative;
                p {
                    font-size: 12px;
                    color: #383838;
                    text-align: center;
                }
                .add-button {
                    border: 2px dashed #949494;
                    border-radius: 50%;
                    text-align: center;
                    width: 50px;
                    padding: 10px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    i {
                        font-size: 50px;
                        font-weight: 900;
                        color: #949494;
                    }
                }
                .add-button:hover {
                    border: 2px solid #e7a100;
                    i {
                        color: #e7a100;
                    }
                }
            }
        }
    }
</style>